<script lang="ts" setup>
const props = defineProps<{
  menuItems: { name: string; scrollTo: string }[];
  onSignIn?: () => void ;
  onSignUp?: () => void;
  onScroll: (id: string) => void;
}>();
const emits = defineEmits(['close']);
</script>

<template>
  <div>
    <div class="relative text-center" @click="emits('close')">
      <a
        v-for="item in props.menuItems"
        :key="item.name"
        class="mobile-menu-item"
        @click="onScroll(item.scrollTo)"
      >
        {{ item.name }}
      </a>
    </div>
    <div class="mobile-menu-actions" @click="emits('close')">
      <AButton class="ant-cover__Button-3d-yellow" type="primary" @click="onSignIn">
        Log in
      </AButton>
      <AButton class="ant-cover__Button-3d-primary" type="primary" @click="onSignUp">
        Become a partner
      </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mobile-menu-item {
  letter-spacing: -0.02em;
  line-height: 125%;
  --uno: 'text-white block text-6 font-500 mb-10 decoration-none';
}
.mobile-menu-actions {
  --uno: 'm-[102px_auto_24px] flex gap-4 w-82 flex-col';
}
</style>
